<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height: 100vh;
			}
			#canvas{display: block;width: 100%;height: 100%;}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
	</body>
	<script type="application/javascript">
		let ctx = document.getElementById("canvas").getContext("2d");
		class Circle {
			constructor(x,y) {
			    this.x=x,
				this.y=y,
				this.r = Math.random()*10,
				this._mx = Math.random(),
				this._my = Math.random()
			}
			drawCircle(ctx){
				ctx.beginPath();
				ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
				ctx.fillStyle = "rgba(238,12,185,0.4)";
				ctx.fill();
			}
			drawLine(ctx,cir){
				let ox = cir.x;
				let oy = cir.y;
				let dx = this.x- ox;
				let dy = this.y-oy;
				let c = Math.sqrt(dx*dx+dy*dy);
				if(c < 150){
					ctx.beginPath();
					ctx.moveTo(this.x,this.y);
					ctx.lineTo(ox,oy);
					ctx.strokeStyle = "rgba(200,200,200,0.5)";
					ctx.closePath();
					ctx.stroke();
				}
			}
			move(w,h){
				if(this.x <0 || this.x + this._mx > w){
					this._mx = -this._mx;
				}
				if(this.y <0 || this.y + this._my > h){
					this._my = -this._my;
				}
				this.x = this.x + this._mx;
				this.y = this.y + this._my;
			}
		}
		class CurrentCir extends Circle{
			constructor(x,y){
				super(x,y);
			}
			drawCircle(ctx){
				this.r = 8;
				ctx.beginPath();
				ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
				ctx.fillStyle = "rgba(50,255,30,0.4)";
				ctx.fill();
			}
		} 
		let w = canvas.width = canvas.offsetWidth;
		let h = canvas.height = canvas.offsetHeight;
		let circleArr = [];
		let current_c = new CurrentCir(0,0);
		let init = function(num){
			for (var i = 0; i < num; i++) {
				circleArr.push(new Circle(w*Math.random(),h*Math.random()));
			}
			draw();
		}
		let draw = function(){
			ctx.clearRect(0,0,w,h);
			for (var i = 0; i < circleArr.length; i++) {
				let item = circleArr[i];
				item.drawCircle(ctx);
				item.move(w,h);
				for (let j = i+1;j<circleArr.length; j++) {
					item.drawLine(ctx, circleArr[j]);
				}
				if(current_c.x){
					current_c.drawCircle(ctx);
					for (var k = 1; k < circleArr.length; k++) {
						current_c.drawLine(ctx, circleArr[k])
					}
				}
			}
			window.requestAnimationFrame(draw);
		}
		window.addEventListener("mousemove",function(e){
			current_c.x = e.layerX;
			current_c.y = e.layerY;
		})
		window.addEventListener("mouseout",function(e){
			current_c.x = null;
			current_c.y = null;
		})
		init(50);
	</script>
</html>
